Skip to content

chore(website): Upgrade to Docusaurus v3.6 - Enable Docusaurus Faster#4268

Merged
Simek merged 9 commits into
react:mainfrom
slorber:slorber/docusaurus-v3.6
Nov 7, 2024
Merged

chore(website): Upgrade to Docusaurus v3.6 - Enable Docusaurus Faster#4268
Simek merged 9 commits into
react:mainfrom
slorber:slorber/docusaurus-v3.6

Conversation

@slorber

@slorber slorber commented Oct 10, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor

Docusaurus Faster should allow the React Native Website to build... faster.

Benchmarks

Cold build:

Site builds 3x+ faster on cold builds.

hyperfine --prepare 'yarn clear' --runs 3 'DOCUSAURUS_FASTER=false yarn build' 'DOCUSAURUS_FASTER=true yarn build'


Benchmark 1: DOCUSAURUS_FASTER=false yarn build
  Time (mean ± σ):     103.536 s ±  1.828 s    [User: 184.537 s, System: 19.702 s]
  Range (min … max):   101.862 s … 105.487 s    3 runs

Benchmark 2: DOCUSAURUS_FASTER=true yarn build
  Time (mean ± σ):     34.091 s ±  0.556 s    [User: 67.332 s, System: 9.419 s]
  Range (min … max):   33.746 s … 34.733 s    3 runs

Summary
  DOCUSAURUS_FASTER=true yarn build ran
    3.04 ± 0.07 times faster than DOCUSAURUS_FASTER=false yarn build

Warm build

About the same time for warm rebuilds, despite the lack of persistent caching (see facebook/docusaurus#10556). Rspack also outperforms

DOCUSAURUS_FASTER=false yarn build
hyperfine --runs 3 'DOCUSAURUS_FASTER=false yarn build' 'DOCUSAURUS_FASTER=true yarn build'


Benchmark 1: DOCUSAURUS_FASTER=false yarn build
  Time (mean ± σ):     41.263 s ±  3.233 s    [User: 49.333 s, System: 9.786 s]
  Range (min … max):   37.870 s … 44.308 s    3 runs

Benchmark 2: DOCUSAURUS_FASTER=true yarn build
  Time (mean ± σ):     36.655 s ±  3.864 s    [User: 71.131 s, System: 11.102 s]
  Range (min … max):   32.397 s … 39.936 s    3 runs

Summary
  DOCUSAURUS_FASTER=true yarn build ran
    1.13 ± 0.15 times faster than DOCUSAURUS_FASTER=false yarn build

@netlify

netlify Bot commented Oct 10, 2024 •
edited
Loading

Copy link
Copy Markdown

✅ Deploy Preview for react-native ready!

Name Link
🔨 Latest commit 153c7c5
🔍 Latest deploy log https://app.netlify.com/sites/react-native/deploys/672cacfdad3d9100087d4eaa
😎 Deploy Preview https://deploy-preview-4268--react-native.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@slorber slorber mentioned this pull request Oct 10, 2024
Merged
@slorber slorber mentioned this pull request Oct 11, 2024
Open
@slorber slorber mentioned this pull request Oct 25, 2024
Merged
@slorber

slorber commented Nov 4, 2024

Copy link
Copy Markdown
Contributor Author

Docusaurus v3.6 is out - PR updated

Blog post coming: https://docusaurus.io/blog/releases/3.6

@Simek ready to review

@slorber slorber marked this pull request as ready for review November 4, 2024 11:02
Simek
Simek approved these changes Nov 4, 2024
View reviewed changes

@Simek Simek left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for working on the upgrade, tested locally, LGTM! 👍

@Simek Simek requested a review from cortinico November 4, 2024 17:59
@cortinico

cortinico commented Nov 4, 2024

Copy link
Copy Markdown
Contributor

There seems to be something going on with the banner on top (it's like cropped?):

Before Aftre
Screenshot 2024-11-04 at 18 08 21 Screenshot 2024-11-04 at 18 08 25

@Simek

Simek commented Nov 4, 2024

Copy link
Copy Markdown
Collaborator

Nice catch Nico! 👍

Found out that our CSS variable reassignment has been superseded by @media scoped overwrite in the Docusuars code.

Pushed a small fix for that, and also updated the lock after switching from pre-release to stable Docusuars version.

@slorber

slorber commented Nov 5, 2024

Copy link
Copy Markdown
Contributor Author

nice catch thanks

Switching for cssnano to lightningcss might have some subtle effects on CSS order. Previously our optimizer was a bit too aggressive/unsafe and removing that aggressivity (that doesn't even exist in lightnings) might change some rules being applied.

If you want more confidence than manual review, I can run my visual regression tests on the PR, similarly to what I did for the Docusaurus v3 upgrade here #3780

@cortinico

cortinico commented Nov 5, 2024

Copy link
Copy Markdown
Contributor

If you want more confidence than manual review, I can run my visual regression tests on the PR, similarly to what I did for the Docusaurus v3 upgrade here #3780

Yeah that would be nice if is not too much work

@slorber

slorber commented Nov 5, 2024 •
edited
Loading

Copy link
Copy Markdown
Contributor Author

I'll do that on Thursday when I'm back on Docusaurus 👍

Yes, it's additional manual work for me because Argos CI is not installed on this repo and I have to work around that using a separate test repo.

In the future, if you want to have visual regression tests simply by adding a PR label on a PR, you could adopt this CI workflow: https://docusaurus.io/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing

I suggested it on Discord already but not sure who is supposed to make the decision.
I think if the React Native team asks for it, @zpao could add Argos to the repo (free OSS plan, already approved for Docusaurus) and I could help you set it up.

The question is: is it worth it?
Do you see yourself using visual regression tests more regularly?
Can it be useful to you outside of my upgrade PRs?

@cortinico

cortinico commented Nov 5, 2024

Copy link
Copy Markdown
Contributor

Do you see yourself using visual regression tests more regularly?

I guess our primary use cases would be significant version bumps like this one. We rarely do site-wide changes that are hard to check if regressing from a preview

@slorber slorber mentioned this pull request Nov 7, 2024
Closed
@slorber

slorber commented Nov 7, 2024

Copy link
Copy Markdown
Contributor Author

I guess our primary use cases would be significant version bumps like this one. We rarely do site-wide changes that are hard to check if regressing from a preview

If I'm the only one doing these bumps, it's probably useless then. If others do it, it may be useful.

Visual regression tests here:

PR: slorber/rnw-visual-tests#9

Only one change reported:

CleanShot 2024-11-07 at 13 26 41

Report: https://app.argos-ci.com/slorber/rnw-visual-tests/builds/75/117730262

Note: this is a false positive and happens because this page has a snack player input autofocus that makes the page scroll: https://reactnative.dev/docs/improvingux

So, it looks safe to merge 👍

@Simek Simek merged commit f82aaf5 into react:main Nov 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Simek Simek Simek approved these changes

@cortinico cortinico cortinico approved these changes

Assignees

No one assigned

Labels

CLA Signed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@slorber @cortinico @Simek @facebook-github-bot